<div class="box">
    <div class="box-header">
        <h3 class="box-title">地区关键词分布</h3>
    </div>
    <div class="box-body">
        <div id="area-keywords" style="height:300px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var AppAreaKeywords = echarts.init(document.getElementById('area-keywords'));
            AppAreaKeywords.showLoading();
            fetch('/api/admin/home/area-keywords', {method: "POST"}).then(res => res.json())
                .then(data => {
                    AppAreaKeywords.hideLoading();
                    // 指定图表的配置项和数据
                    let option = {
                        legend: {
                            type: 'scroll',
                            orient: 'horizontal',
                            top: 'bottom',
                            selected: data.selected
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                mark: {show: true},
                                dataView: {show: true, readOnly: false},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        series: [
                            {
                                name: '地区关键词分布',
                                type: 'pie',
                                radius: ['30%', '50%'],
                                center: ['50%', '35%'],
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 2
                                },
                                data: data.data
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    AppAreaKeywords.setOption(option);
                });
        </script>
    </div>
</div>
